// 定义放图片的数组
var arr = ['https://img30.360buyimg.com/pop/s590x470_jfs/t1/179076/17/22689/93963/62481b21Ef9eee672/aaa4162abc1d1db0.jpg.webp','https://img11.360buyimg.com/pop/s590x470_jfs/t1/126593/31/26894/97054/6242a060E25ca15e3/52734f3f5aea33df.jpg.webp','https://img12.360buyimg.com/pop/s590x470_jfs/t1/104696/24/25454/82268/623998e5E45d57ddf/dcd2f33144a2ef7c.jpg.webp','https://img14.360buyimg.com/pop/s590x470_jfs/t1/107362/20/24177/90602/6233decdE5627d944/b7194e538e3c8c7a.jpg.webp','https://img10.360buyimg.com/pop/s590x470_jfs/t1/220389/5/15245/73548/62344962Ee7e6fc80/e4cfb79283de0783.jpg.webp']
// 根据数组创建li
arr.forEach(item => {
    $(`
        <li>
            <a href="">
                <img src="${item}" />    
            </a>    
        </li>
    `).appendTo($('.carousel ul'))

    $('<li></li>').appendTo($('.carousel ol'))
})
// 给第一个ol下的li添加红色背景
$('.carousel ol li').first().css('backgroundColor', 'red')
// 将ul的第一个和最后一个复制放在后面和前面
var $first = $('.carousel ul li').first().clone()
// 给ul的最前面放最后一个复制品
$('.carousel ul').prepend($('.carousel ul li').last().clone())
// 将$first放在ul的末尾
$first.appendTo($('.carousel ul'))
// 设置ul的宽度
$('.carousel ul').width($('.carousel ul').children().length * $first.outerWidth(true))
// 设置ul的left
$('.carousel ul').css('left', -$first.outerWidth(true) + 'px')
// 定义当前显示的li的下标
var index = 1
// 定义开关
var flag = true
// 定义定时器变量
var timer
// 右箭头点击轮播
$('.carousel').on('click', 'a.rightBtn', function(){
    // 如果开关是关闭状态，无效果
    if(!flag) return false
    // 一旦开始走了，就关上开关
    flag = false
    // 下标自增
    index++
    // 让ul轮播
    animate($('.carousel ul')[0], {
        left: -index * $first.outerWidth(true)
    }, function(){
        // 判断index的最大值
        if(index === $('.carousel ul li').length - 1){
            index = 1
            // 秒切
            $('.carousel ul').css('left', -index * $first.outerWidth(true) + 'px')
        }
        // 设置小圆点
        $('.carousel ol li').eq(index-1).css('backgroundColor', 'red').siblings().css('backgroundColor', '#000')
        // 开关打开
        flag = true
    })
})

// 左箭头
$('.carousel>a.leftBtn').click(function(){
    if(!flag) return false
    flag = false
    index--
    animate($('.carousel ul')[0], {
        left: -index * $first.outerWidth(true)
    }, function(){
        if(index === 0){
            index = $('.carousel ul li').length - 2
            $('.carousel ul').css('left', -index * $first.outerWidth(true) + 'px')
        }
        // 设置小圆点
        $('.carousel ol li').eq(index-1).css('backgroundColor', 'red').siblings().css('backgroundColor', '#000')
        flag = true
    })
})

// 小圆点点击
$('.carousel ol li').click(function(){
    if(!flag) return false
    flag = false
    index = $(this).index() + 1
    animate($('.carousel ul')[0], {
        left: -index * $first.outerWidth(true)
    }, function(){
        if(index === 0){
            index = $('.carousel ul li').length - 2
            $('.carousel ul').css('left', -index * $first.outerWidth(true) + 'px')
        }
        // 设置小圆点
        $('.carousel ol li').eq(index-1).css('backgroundColor', 'red').siblings().css('backgroundColor', '#000')
        flag = true
    })
})

// 自动轮播
timer = setInterval(function(){
    $('.carousel>a.rightBtn').trigger('click')
}, 1000)

// 移入移出
$('.carousel').hover(function(){
    clearInterval(timer)
}, function(){
    timer = setInterval(function(){
        $('.carousel>a.rightBtn').trigger('click')
    }, 1000)
})